<!-- （张仕琪）搜索页面 -->
<template>
  <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="onClickLeft" />

  <van-search v-model="value" show-action label="" placeholder="请输入商品名或商家" @search="onSearch" clearable="true"
    shape="round">
    <template #left>
      <van-dropdown-menu active-color="#1989fa" calss="my_dropdown_menu">
        <van-dropdown-item v-model="value1" :options="options" />
      </van-dropdown-menu>
    </template>
    <template #action>
      <div @click="onClickButton">GO ></div>
    </template>
  </van-search>

  <div class="tracking-in-expand-fwd-bottom">
  <SearchHot></SearchHot>
  <van-divider :style="{ borderColor: '#C1CDCD'}"/>
  <SearchHistory></SearchHistory>
  </div>

  <!--底部-->
  <div style="margin-top: 40px">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" @click="$router.push('/')">首页</van-tabbar-item>
      <van-tabbar-item icon="search" @click="$router.push('/search')">搜索</van-tabbar-item>
      <van-tabbar-item icon="bill" @click="$router.push('/order')">订单</van-tabbar-item>
      <van-tabbar-item icon="manager-o" @click="$router.push('/user')">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import { Toast } from 'vant';
import SearchHistory from "./SearchHistory.vue";
import SearchHot from "./SearchHot.vue";
import http from '@/utils/request.js'

const active = ref(1);

const router = useRouter();

const value = ref('');

const value1 = ref(0);
const options = [
  { text: '全部', value: 0 },
  { text: '菜品', value: 1 },
  { text: '商家', value: 2 },
];

const onSearch = (val) => {
  console.log('要搜索的类别和字段：' + value1.value + val);
  http.get(
    '/good/usergoods/' + value1.value + "?search="+val  
  ).then((res) => {

  }

  )
}
const onClickButton = () => Toast(value.value);
const onClickLeft = () => history.back();


</script>

<style >
.van-dropdown-menu__bar {
  background-color: #ECF1EF !important;
  /* border-style: solid; */
  border-radius: 10px 10px 10px 10px;
  animation: shadow-pop-bl .3s cubic-bezier(.47, 0.000, .745, .715) both

}

.my_dropdown_menu>.van-dropdown-menu__bar {
  background-color: #ECF1EF !important;

  border-radius: 10px 10px 10px 10px;
  animation: shadow-pop-bl .3s cubic-bezier(.47, 0.000, .745, .715) both

}


@keyframes shadow-pop-bl {
  0% {
    box-shadow: 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e, 0 0 #3e3e3e;
    transform: translateX(0) translateY(0)
  }

  100% {
    box-shadow: -1px 1px #3e3e3e, -2px 2px #3e3e3e, -3px 3px #3e3e3e, -4px 4px #3e3e3e, -5px 5px #3e3e3e, -6px 6px #3e3e3e;
    transform: translateX(3px) translateY(-3px)
  }
}

.tracking-in-expand-fwd-bottom {
    animation: tracking-in-expand-fwd-bottom .8s cubic-bezier(.215, .61, .355, 1.000) both
}

@keyframes tracking-in-expand-fwd-bottom {
    0% {
        letter-spacing: -.5em;
        transform: translateZ(-700px) translateY(500px);
        opacity: 0
    }

    40% {
        opacity: .6
    }

    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1
    }
}
</style>
